<template>
  <div>
      <!-- 刷新列表按钮 -->
      <Button type="primary" style="margin:8px 0 0" shape="circle" @click="fetchAccessControll">刷新列表</Button>
      
      <div class="grant-load" v-if="loading">
          <Spin size="large" fix ></Spin>
      </div>

      <div class="grant-wrap" v-for="uuid in uuids" :key="uuid" v-else="!loading">
          <p class="grant-title">{{accessData[uuid][0].device_name || '门禁'}}</p>
          <m3-auth-history :isFromRenterDetail="true" v-model="accessData[uuid]"/>
      </div>
  </div>
</template>

<script>
import m3AuthHistory from '../../tenancy-device/device-detail/m3-auth-history'
import { http, api } from '@/libs/http'
export default {
  data () {
    return {
      accessData: {},
      loading: false // 是否正在加载
    }
  },

  props: {
    leaseId: {
      required: true,
      type: String
    },

    tenantId: {
      required: true,
      type: [Number, String]
    }
  },

  components: { m3AuthHistory },

  computed: {
    uuids () {
      return Object.keys(this.accessData)
    }
  },

  mounted () {
    this.fetchAccessControll()
  },

  methods: {
    async fetchAccessControll () {
      this.loading = true
      try {
        const { rows } = await http.fetch(this, api.m3_tenant_auth_list, [this.tenantId], { lease_id: this.leaseId })

        this.accessData = this.handleData(rows)
      } catch (error) {
        console.log('error', error)
      } finally {
        this.loading = false
      }
    },

    /**
        * 处理数据
        */
    handleData (rows) {
      return rows.reduce((data, row) => {
        const { uuid } = row

        if (!data[uuid]) {
          data[uuid] = []
        }

        data[uuid].push(row)
        return data
      }, {})
    }
  }
}
</script>
<style lang='less' scoped>
.grant {
    &-wrap {
        padding: 10px 0 20px;
    }

    &-title {
        font-size: 20px;
        text-align: center;
        padding-bottom: 20px;
    }

    &-load {
        width: 100%;
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>